<template>
  <div class="app-container">
    <el-card>
      <el-card
        class="operate-container"
        shadow="never"
      >
        <i
          class="el-icon-tickets"
          style="margin-top: 5px"
        ></i>
        <span style="margin-top: 5px">数据列表</span>
        <el-button
          class="btn-add"
          @click="handleAddMenu()"
          size="mini"
        >
          添加{{ parentId?'二':'一' }}级目录
        </el-button>
      </el-card>
      <div class="table-container">
        <el-table
          ref="menuTable"
          style="width: 100%"
          :data="list"
          v-loading="listLoading"
          border
        >
          <el-table-column
            label="编号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.$index+1 }}</template>
          </el-table-column>
          <el-table-column
            label="分类名称"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.serverSpecName }}</template>
          </el-table-column>
          <el-table-column
            v-if="parentId===0"
            label="分类图标"
            width="100"
            align="center"
          >
            <template slot-scope="scope"><img
              style="height: 40px"
              :src="scope.row.picMainStr"
            ></template>
          </el-table-column>
          <el-table-column
            v-if="parentId!==0"
            label="列表页图标"
            width="100"
            align="center"
          >
            <template slot-scope="scope"><img
              style="height: 40px"
              :src="scope.row.picListStr"
            ></template>
          </el-table-column>
          <el-table-column
            label="级别"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ serverLevel[scope.row.serverSpecLevel] }}</template>
          </el-table-column>
          <el-table-column
            label="设置"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                :disabled="scope.row.parentId!==0"
                @click="handleShowNextLevel(scope.$index, scope.row)"
              >查看下级
              </el-button>
              <!-- :disabled="scope.row.isChildren==='N'" -->

              <!-- <el-button
                size="mini"
                type="text"
                :disabled="true"
                v-if="scope.row.serverSpecLevel===1"
                @click="handleShowNextLevel(scope.$index, scope.row)"
              >查看下级
              </el-button> -->
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.$index, scope.row)"
              >编辑
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.$index, scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        class="pagination-container"
        style="margin-bottom: 20px"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.pageSize"
          :page-sizes="[10,15,20]"
          :current-page.sync="listQuery.pageNum"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-row
      v-if="parentId!==0"
      type="flex"
      justify="end"
      style="margin-top: 20px"
    >
      <el-col :span="2">
        <el-button @click="back">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { serverspecList, serverspecDelete } from '@/api/servMs'
export default {
  name: 'MenuList',
  data () {
    return {
      list: null,
      total: null,
      serverLevel: ['', '一级', '二级'],
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        isNeedPic: true,
        serverSpecName: '',
        serverSpecLevel: ''
      },
      parentId: 0
    }
  },
  created () {
    this.resetParentId()
    this.getList()
  },
  watch: {
    $route (route) {
      this.resetParentId()
      this.getList()
    }
  },
  methods: {
    resetParentId () {
      this.listQuery.pageNum = 1
      if (this.$route.query.parentId != null) {
        this.parentId = parseInt(this.$route.query.parentId)
      } else {
        this.parentId = 0
      }
    },
    handleAddMenu () {
      this.$router.push({
        path: '/serv-ms/addType',
        query: { parentId: this.parentId }
      })
    },
    getList () {
      this.listLoading = true
      serverspecList({ parentId: this.parentId, ...this.listQuery }).then(
        (response) => {
          this.listLoading = false
          this.list = response.data.list
          this.total = response.data.total
        }
      )
    },
    handleSizeChange (val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleShowNextLevel (index, row) {
      this.$router.push({
        path: '/serv-ms/serv-type',
        query: { parentId: row.id }
      })
    },
    handleUpdate (index, row) {
      this.$router.push({
        path: '/serv-ms/updateServType',
        query: { id: row.id, parentId: row.parentId }
      })
    },
    handleDelete (index, row) {
      this.$confirm('是否要删除该菜单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        serverspecDelete({ serverSpecIds: row.id }).then((response) => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          })
          this.getList()
        })
      })
    },
    back () {
      this.$router.go(-1)
    }
  },
  filters: {
    disableNextLevel (value) {
      return !(value && value.length >= 0)
    }
  }
}
</script>

<style scoped>
</style>
